<template> 
	<div>
		<el-upload :action="useOss?ossUploadUrl:minioUploadUrl" :data="useOss?dataObj:null" list-type="picture"
			:multiple="false" :show-file-list="showFileList" :file-list="fileList" :before-upload="beforeUpload"
			:on-progress="handleProcess" :on-remove="handleRemove" :on-success="handleUploadSuccess"
			:on-preview="handlePreview">
			<el-button size="small" type="primary">点击上传</el-button>
			<div slot="tip" class="el-upload__tip">不超过1024MB</div>
		</el-upload>
		<el-progress v-show="showProgress" :text-inside="true" :stroke-width="15" :percentage="progress"></el-progress>
		<el-dialog append-to-body :visible.sync="dialogVisible">
			<img width="100%" :src="fileList[0].url" alt="">
		</el-dialog>
	</div>
</template>
<script>
	export default {
		name: 'SingleUploadOss',
		props: {
			value: String
		},
		computed: {
			imageUrl() {
				return this.value;
			},
			imageName() {
				if (this.value != null && this.value !== '') {
					return this.value.substr(this.value.lastIndexOf("/") + 1);
				} else {
					return null;
				}
			},
			fileList() {
				return [{
					name: this.imageName,
					url: this.imageUrl
				}]
			},
			showFileList: {
				get: function() {
					return this.value !== null && this.value !== '' && this.value !== undefined;
				},
				set: function(newValue) {}
			}
		},
		data() {
			return {
				showProgress: false, //进度条的显示
				progress: 0,
				dataObj: {
					policy: '',
					signature: '',
					key: '',
					ossaccessKeyId: '',
					dir: '',
					host: '',
					// callback:'',
				},
				dialogVisible: false,
				useOss: true, //使用oss->true;使用MinIO->false
				ossUploadUrl: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com',
				minioUploadUrl: 'http://localhost:8080/minio/upload',
			};
		},
		methods: {
			emitInput(val) {
				this.$emit('input', val)
			},
			handleRemove(file, fileList) {
				this.emitInput('');
			},
			handlePreview(file) {
				this.dialogVisible = true;
			},
			handleProcess(event, file, fileList) {
				this.progress = event.percent;
			},
			beforeUpload(file) {
				const isLt10M = file.size / 1024 / 1024 < 1024;
				if (!isLt10M) {
					this.$message.error('上传大小不能超过 1G!');
					return false;
				}
				var index = file.name.lastIndexOf(".");
				//获取后缀
				var ext = file.name.substr(index);
				let filename = new Date().getTime() + ext.replace(',', '')
				let _self = this;
				if (!this.useOss) {
					//不使用oss不需要获取策略
					return true;
				}
				return new Promise((resolve, reject) => {

					this.$http.get(this.$host + '/admin/oss/policy', {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					}).then(function(response) {
						if (response.data.code == 1000) {
							_self.dataObj.policy = response.data.data.policy;
							_self.dataObj.signature = response.data.data.signature;
							_self.dataObj.ossaccessKeyId = response.data.data.accessKeyId;
							_self.dataObj.key = response.data.data.dir + '/' + filename;
							_self.dataObj.dir = response.data.data.dir;
							_self.dataObj.host = response.data.data.host;
							_self.ossUploadUrl = response.data.data.host;
							_self.showProgress = true;
							// _self.dataObj.callback = response.data.callback;
							resolve(true)
						}
					});

				})
			},
			handleUploadSuccess(res, file) {
				this.showFileList = true;
				this.fileList.pop();
				let url = this.dataObj.host + '/' + this.dataObj.key;
				if (!this.useOss) {
					//不使用oss直接获取图片路径
					url = res.data.url;
				}
				this.showProgress = false;
				this.fileList.push({
					name: file.name,
					url: url
				});
				this.emitInput(this.fileList[0].url);
			}
		}
	}
</script>
<style>

</style>
